<style include="settings-shared"></style>
<settings-animated-pages id="pages" section="personalization"
    focus-config="[[focusConfig_]]">

  <template is="dom-if" if="[[isPersonalizationHubEnabled_]]">
    <div route-path="default">
      <cr-link-row class="hr" id="personalizationHubButton"
          label="$i18n{personalizationHubTitle}"
          sub-label="$i18n{personalizationHubSubtitle}" external
          on-click="openPersonalizationHub_">
      </cr-link-row>
    </div>
  </template>

  <template is="dom-if" if="[[!isPersonalizationHubEnabled_]]">
    <div route-path="default">
      <cr-link-row id="changePictureRow"
          label="$i18n{changePictureTitle}"
          on-click="navigateToChangePicture_"
          role-description="$i18n{subpageArrowRoleDescription}">
      </cr-link-row>
      <cr-link-row class="hr" id="wallpaperButton"
          hidden="[[!showWallpaperRow_]]"
          on-click="openWallpaperManager_" label="$i18n{setWallpaper}"
          sub-label="$i18n{openWallpaperApp}"
          disabled="[[isWallpaperPolicyControlled_]]" external
          deep-link-focus-id$="[[Setting.kOpenWallpaper]]">
        <template is="dom-if" if="[[isWallpaperPolicyControlled_]]">
          <cr-policy-indicator id="wallpaperPolicyIndicator"
              indicator-type="devicePolicy">
          </cr-policy-indicator>
        </template>
      </cr-link-row>

      <!-- Ambient mode -->
      <template is="dom-if" if="[[isAmbientModeEnabled_]]">
        <cr-link-row
            class="hr"
            id="ambientModeRow"
            label="$i18n{ambientModeTitle}"
            sub-label="[[getAmbientModeRowSubLabel_(
                prefs.settings.ambient_mode.enabled.value)]]"
            on-click="navigateToAmbientMode_"
            role-description="$i18n{subpageArrowRoleDescription}">
        </cr-link-row>
      </template>

      <!-- Dark mode -->
      <template is="dom-if" if="[[isDarkModeAllowed_]]">
        <cr-link-row
            class="hr"
            id="darkModeRow"
            label="$i18n{darkModeTitle}"
            on-click="navigateToDarkMode_"
            role-description="$i18n{subpageArrowRoleDescription}">
        </cr-link-row>
      </template>
    </div>

    <template is="dom-if" route-path="/changePicture">
      <settings-subpage page-title="$i18n{changePictureTitle}">
        <settings-change-picture></settings-change-picture>
      </settings-subpage>
    </template>

    <template is="dom-if" if="[[isAmbientModeEnabled_]]">
      <template is="dom-if" route-path="/ambientMode">
        <settings-subpage page-title="$i18n{ambientModeTitle}">
          <settings-ambient-mode-page prefs="{{prefs}}">
          </settings-ambient-mode-page>
        </settings-subpage>
      </template>

      <template is="dom-if" route-path="/ambientMode/photos">
        <settings-subpage>
          <settings-ambient-mode-photos-page>
          </settings-ambient-mode-photos-page>
        </settings-subpage>
      </template>

    </template>

    <template is="dom-if" route-path="/darkMode">
      <settings-subpage page-title="$i18n{darkModeTitle}">
        <settings-dark-mode-subpage prefs="{{prefs}}">
        </settings-dark-mode-subpage>
      </settings-subpage>
    </template>
  </template>
</settings-animated-pages>
